<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <script src="../lib/flexible.js"></script>
    <link rel="stylesheet" href="../lib/vant.css" />
    <link rel="stylesheet/less" href="../style/index.less" />
    <script src="../lib/less.min.js"></script>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vant.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/base64.min.js"></script>
    <script ignore src="../js/env.js"></script>
    <script ignore src="../js/utils.js"></script>
    <title>数据明细</title>
  </head>
  <body>
    <div id="app">
      <div class="home-flowPath-container">
        <div
          class="nav-bar-container"
          :style="{
  paddingTop: (client == 'App' ? statusBarHeight || 20 : 0) + 'px',   
  background: '#385AF9',
}"
        >
          <van-nav-bar
            @click-left="onClickBack($event)"
            left-arrow
            :style="{ background: '#385AF9'}"
          >
            <template #left>
              <van-icon name="arrow-left" :size="22" color="#FFFFFF" />
            </template>
            <template #title>
              <div class="van-nav-bar-title" :style="{ color: '#FFFFFF' }">
                数据明细
              </div>
            </template>
          </van-nav-bar>
        </div>
        <div class="open-container">
          <div class="pull-refresh-container">
            <van-pull-refresh
              :value="loading"
              @refresh="onRefresh"
              ref="pull-refresh"
            >
              <div style="height: 100%">
                <div class="card-list" v-for="(v, i) in tableData" :key="i">
                  <div class="title">{{ v.equName }}</div>
                  <div class="row">
                    <div class="lable">接料开始时间：</div>
                    <div class="value">{{ v.startTime }}</div>
                  </div>
                  <div class="row">
                    <div class="lable">接料结束时间：</div>
                    <div class="value">{{ v.endTime }}</div>
                  </div>
                  <div class="row">
                    <div class="lable">放料时间：</div>
                    <div class="value">{{ v.dischargeTime }}</div>
                  </div>
                  <!-- <div class="row">
                    <div class="lable">接料方量(m³)：</div>
                    <div class="value">{{ v.formul }}</div>
                  </div> -->
                  <!-- <div class="row">
                    <div class="lable">接料重量(t)：</div>
                    <div class="value">{{ v.weight }}</div>
                  </div> -->
                </div>
              </div>
              <!-- 触底文案 -->
              <div
                class="reach-bottom-container"
                v-if="isReachBottomText && !loading"
              >
                <van-loading size="24px" v-if="!reachBottomFinished">
                  加载中...
                </van-loading>
                <div class="no-more-data" v-else>~没有更多了~</div>
              </div>
            </van-pull-refresh>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script type="module">
  var app = new Vue({
    el: "#app",
    data() {
      return {
        //是否处于加载中状态
        loading: false,
        //【触底】是否加载结束
        reachBottomFinished: false,
        //是否显示触底文案
        isReachBottomText: false,
        tableData: [],
        //
        statusBarHeight: 0,
        client: "",
      };
    },
    mounted() {
      let { statusBarHeight, client } = getLoginData();
      this.client = client;
      if (client == "App") {
        this.statusBarHeight = statusBarHeight;
      } else {
        this.statusBarHeight = 0;
      }
      this.$nextTick((_) => {
        this.initOperate();
        this.getTableData();
      });
    },
    methods: {
      onClickBack() {
        window.history.back();
      },
      initOperate() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        scrollview.addEventListener(
          "scroll",
          debounce((e) => {
            if (
              Math.ceil(e.target.scrollTop + e.target.clientHeight) >=
              e.target.scrollHeight
            ) {
              //触底
              (!this.reachBottomFinished || !this.isReachBottomText) &&
                this.onReachBottom();
            }
          }, 500),
          true
        );
      },
      clacSize() {
        let scrollview = this.$refs["pull-refresh"]?.$el;
        if (scrollview.scrollHeight <= scrollview.clientHeight) {
          this.isReachBottomText = false;
          return false;
        }
        return true;
      },

      //触底加载
      onReachBottom() {},

      //下拉刷新开启
      onRefresh() {
        this.loading = true;
        this.getTableData();
      },

      //查询列表数据
      getTableData() {
        this.$toast.loading({
          duration: 0,
          forbidClick: true,
          message: "页面加载中",
        });
        let { token, tenantCode } = getLoginData();
        let { componentParts } = JSON.parse(localStorage.getItem("dataSource"));
        return new Promise((resolve, reject) => {
          axios({
            method: "POST",
            headers: {
              Authorization: `Bearer ${token}`,
              Tenantcode: tenantCode,
            },
            url: `${YX_BASE_API_URL}/beam/quality-torpedo-ladle/queryListByComparts`,
            responseType: "json",
            data: {
              componentParts,
            },
          })
            .then((res) => {
              let {
                data: { data },
              } = res;
              this.tableData = data?.result || [];
              resolve();
            })
            .catch((_) => {
              this.tableData = [];
              reject();
            })
            .finally((_) => {
              //关闭下拉刷新
              setTimeout(() => {
                this.$toast.clear();
                this.loading = false;
              }, 500);
            });
        });
      },
    },
    destroyed() {
      this.$toast.clear();
    },
  });
</script>
